/*
 * @Author: wangguanqing 
 * @Date: 2018-05-09 16:02:59 
 * @Last Modified by: wangguanqing
 * @Last Modified time: 2018-05-09 16:05:09
 */

<template>
<div>
  <el-table  border :data="tableData" style="width: 100%;font-size:1.1rem">
      <el-table-column id='column'   :key='res' v-for='(res,index) in title' :label="res">
        <template slot-scope="scope" >
          <div v-if="index != 2" v-html=" String(scope.row[res]).replace(/；/g,';<br/>')"></div>
          <div v-else  :class="scope.row.completionStatus ? '':String(scope.row[res]).indexOf('；') >= 0 ?  'specialcon':'specialconItem'" v-html=" String(scope.row[res]).replace(/；/g,';<br/>')">
          </div>
        </template>
      </el-table-column>
    </el-table>
</div>
</template>
<style>
* {
  padding: 0px;
}
.specialcon {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0px 5px 0px 19px;
  background: #ff5151;
}
.specialcon:hover {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0px 5px 0px 19px;
  color: #fff;
}
.specialconItem:hover {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 5px 0px 19px;
  color: #fff;
}
.specialconItem {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 5px 0px 19px;
  background: #ff5151;
}
/* .el-table__row td{
    background: blue
  } */
</style>
<script>
export default {
  props: ["data", "title"],
  data() {
    return {};
  },
  computed: {
    tableData() {
      var self = this;
      var tableData = [];
      self.data.forEach((item, index) => {
        var obj = {};
        Object.keys(item).forEach((b, id) => {
          if (id === this.title.length || b === "unit") return;
          //
          // item[b] =  item[b].replace(new RegExp("(；)","g"),"<br/>")

          obj[self.title[id]] = item[b];
          obj["completionStatus"] = item.completionStatus;
        });
        tableData.push(obj);
      });
      return tableData;
    }
  },
  methods: {}
};
</script>